<template>
  <div class="page-suno">
    <div class="right-box" element-loading-background="rgba(100,100,100,0.3)">
      <div class="list-box flex-v">
        <h3 class="ml-20 ft-16">历史</h3>
        <div
          class="waterfall-box flex-1"
          v-if="list.length"
          v-infinite-scroll="getMapList"
          :infinite-scroll-disabled="isOver"
          :infinite-scroll-immediate="false"
        >
          <div
            class="item p-10 flex-h border-b-coolgray border-1 border-b-solid"
            :class="{
              active: index == cur,
            }"
            @click="mapListClickHanler(item, index)"
            v-for="(item, index) in list"
          >
            <div class="left-map flex-1">
              <h4 class="mb-15 text-ellipsis-2 left-map_title" :title="item.prompt">{{ item.prompt }}</h4>
              <p class="text-ellipsis-3 mb-10 left-map_text ft-12" :title="item.generatedContent">{{ item.generatedContent }}</p>
              <div class="duration ft-12">
                {{ item.createTime }}
              </div>
            </div>
            <div class="">
              <div class="mt-5">
                <el-tooltip effect="light" content="删除" placement="top">
                  <button class="btn btn-icon" @click.stop="removeJob(item, index == cur)">
                    <i class="iconfont icon-shanchu"></i>
                  </button>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else />
      </div>
    </div>
  </div>
</template>

<script setup>
import { AiImageStatusEnum } from "@/utils/ai/constants";
import { AiMindMapApi } from "@/api/ai/mindmap";
import { formatTime } from "@/utils/libs";
const queryParams = reactive({
  pageNo: 0,
  pageSize: 10,
});
const cur = ref();
const isOver = ref(false);
const list = ref([]); // 初始化数据
const loading = ref(true);
const pageTotal = ref();
const emits = defineEmits(["mapListClickHanler", "removeJob"]);

onMounted(() => {
  initData();
});
const initData = async () => {
  await getMapList();
};
const refreshList = (params) => {
  queryParams.pageNo = 0;
  getMapList();
};
const getMapList = async () => {
  console.log("加载更多");
  if (queryParams.pageNo == 0) {
    isOver.value = false;
  }
  if (isOver.value) {
    return;
  }
  loading.value = true;
  queryParams.pageNo += 1;
  try {
    // 1. 加载图片列表
    // imageListLoadingInstance.value = ElLoading.service({
    //   target: imageListRef.value,
    //   text: "加载中...",
    // });
    const { list: mapList, total } = await AiMindMapApi.getMindMapPage(queryParams);
    if (mapList.length < queryParams.pageSize) {
      isOver.value = true;
    }
    if (queryParams.pageNo === 1) {
      list.value = mapList;
    } else {
      list.value = list.value.concat(mapList);
    }
    pageTotal.value = total;

    // 2. 计算需要轮询的图片
    const newWatImages = {};
    list.value.forEach((item) => {
      if (item.status === AiImageStatusEnum.IN_PROGRESS) {
        newWatImages[item.id] = item;
      }
    });
    // inProgressImageMap.value = newWatImages;
  } finally {
    // 关闭正在“加载中”的 Loading
    // if (imageListLoadingInstance.value) {
    //   imageListLoadingInstance.value.close();
    //   imageListLoadingInstance.value = null;
    // }
  }
};
const mapListClickHanler = (item, i) => {
  cur.value = i;
  emits("mapListClickHanler", item, i);
};

const removeJob = (item,resetCur) => {
  ElMessageBox.confirm("此操作将会删除任务相关文件，继续操作吗?", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      AiMindMapApi.deleteMindMap(item.id)
        .then(() => {
          emits("removeJob", item);
          if (resetCur) {
            cur.value = null;
          }
          ElMessage.success("任务删除成功");
          refreshList(1);
        })
        .catch((e) => {
          // ElMessage.error("任务删除失败：" + e.msg);
        });
    })
    .catch(() => {});
};
defineExpose({
  refreshList,
});
</script>

<style scoped lang="stylus">
@import "../../../../assets/css/suno.styl"
.left-map{
  .left-map_title{
    // color: var(--title-text-color);
    color:#ccccff;
    font-weight: 600;
  }
  .left-map_text,.duration{
    color: var(--main-text-color);
  }
}
</style>
